@charset "utf-8";
@import "reset";
@import "common";
$font-size:64px;
html{
    font-size: 64px;
}
@function r($px){
    @return $px/$font-size*1rem;
}

.resource{
    position: absolute;
    top: r(90px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    bottom: r(95px);
    -webkit-overflow-scrolling: touch;
    .nav-title{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: r(91px);
        background: rgba(0,0,0,.3);
        font-size: 0;
        .nav-bottom{
            padding-left: r(26px);
            padding-right: r(23px);
            padding-top:r(16px);
            font-size: 0;
            color: #FFFFFF;
            h3{
                font-size:16px;
            }
            .nav-text{
                display: flex;
                justify-content: space-between;
                font-size:12px;
                i{
                    font-size:12px;
                    padding-left:r(22px);
                    span{
                        padding-left:r(6px) ;
                    }
                }
            }
        }
    }
    .txvideo-box{
        width: 100%;
        padding: r(23px) r(29px) 0 r(28px);
        .txvideo{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: r(172px);
            border-bottom: 1px solid #cecece;
            .videoimg{
                width: r(209px);
                height: r(142px);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .video-title{
                font-size: 0;
                width: r(357px);
                h3{
                    font-size: 18px;
                }
                p{
                    font-size: 14px;
                    color: #c5c5c5;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    display: -webkit-box;
                    &:nth-of-type(2){
                        text-align: right;
                        color: #939393;
                        padding-top: r(10px);
                        i{
                            font-size: 14px;
                            padding-left: r(19px);
                        }
                        span{
                            font-size: 14px;
                            padding-left: r(9px);
                        }
                    }
                }
            }
        }
    }
    .load{
        width: 100%;
        padding: r(19px) r(30px) r(33px) r(29px);
        text-align: center;
//      border-top: 1px solid #e6e6e6;
        a{
            display:block;
            color:#bbbbbb;
            font-size:22px;
        }
    }
}
.resource-text-box{
    position: absolute;
    top: r(90px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    bottom: r(95px);
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    background: #FFFFFF;
    opacity: 0;
    transition: .5s all ease-out;
    transform: translateX(100%);
    .resource-text{
        font-size: 0;
        width: 100%;
        padding:r(42px) r(11px) r(29px) r(29px) ;
        .text-top{
             h3{
                font-size: 20px;
                font-weight: bold;
            }
            p{
                font-size: 14px;
                color: #c5c5c5;
                i{
                    font-size: 14px;
                    padding-left: r(18px);
                    span{
                        padding-left: r(7px);
                    }
                }
            }
            >div{
                width: 100%;
                text-align: left;
                padding-top: r(51px);
                p{
                    font-size: 14px;
                    color: #8b8b8b;
                }
            }
        }
        .resource-img{
            width: r(581px);
            height: r(337px);
            padding-top: r(27px);
            padding-bottom: r(29px);
            border-bottom: 1px solid #e6e6e6;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .contact{
        width: 100%;
        font-size: 0;
        h3{
            font-size: 20px;
            color: #8e8d8d;
            padding-left: r(27px);
            padding-bottom: r(8px);
        }
        .contact-ul{
            width: 100%;
            background: #b20000;
            padding:r(18px) 0;
            li{
                display: inline-block;
                text-align: center;
                vertical-align: middle;
                width: r(213px);
                height: r(115px);
                border-right: 1px solid #FFFFFF;
                &:last-child{
                    border-right: 0;
                }
                p{
                    font-size: 14px;
                    color: #FFFFFF;
                    padding-top: r(19px);
                }
                .contact-li{
                    display: inline-block;
                    vertical-align: middle;
                    width: 100%;
                    height: 100%;
                    padding-top: r(18px);
                     div{
                        width: 100%;
                        img{
                            width: r(37px);
                            height: r(34px);
                        }
                    }
                }
            }
        }
    }
}
.resource_on{
    opacity: 1;
    width: 100%;
    transform: translateX(0); 
}